<template>
  <view class="px-30 py-20 grid grid-cols-2 gap-x-20 gap-y-40">
    <view v-for="obj in list" :key="obj.id" class="item bg-white pl-30 py-40 flex items-center" @click.stop="to(obj)">
      <image :src="obj.imgUrl || '/static/ky.png'" class="flex-shrink-0" style="width: 76rpx; height: 76rpx;"></image>
      <view class="title-color font-bold text-lg pl-30">{{ obj.name }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "BookType",
  data() {
    return {
      list: [],
    }
  },
  methods: {
    async setList() {
      const {data} = await this.$http.get1('/api/client/word/getWordBookTypes')
      this.list = data
    },
    to(obj) {
      uni.navigateTo({
        url: `/pages/group/group?id=${obj.id}`
      })
    },
  },
  mounted() {
    this.setList()
  },
}
</script>

<style lang="scss">
page {
  background-color: #F2F3F8;
}
.item {
  box-shadow: 0px 0px 4rpx 2rpx rgba(42,65,152,0.1);
  border-radius: 20rpx;
}
.title-color {
  color: #575A64;
}
</style>